﻿import {useEffect, useRef} from "react";
import {ParticleLimit} from "@/pages/NotFound/particle.tsx";
import {useNavigate} from "react-router-dom";

function NotFound() {
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const navigate = useNavigate();
    useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;
        
        const ctx = canvas.getContext("2d");
        if (!ctx) return;
        
        let animationFrameId: number;
        
        // 粒子数组
        const particles: ParticleLimit[] = [];
        const particleCount = 100;
        
        // 随机生成颜色
        const getRandomColor = (): string => {
            const r = Math.floor(Math.random() * 256);
            const g = Math.floor(Math.random() * 256);
            const b = Math.floor(Math.random() * 256);
            return `rgb(${r}, ${g}, ${b})`;
        };
        
        // 初始化粒子
        const initParticles = (): void => {
            for (let i = 0; i < particleCount; i++) {
                const size = Math.random() * 3 + 1; // 粒子大小
                const x = Math.random() * (canvas.width - size * 2) + size;
                const y = Math.random() * (canvas.height - size * 2) + size;
                const directionX = Math.random() * 0.4 - 0.2; // 随机速度
                const directionY = Math.random() * 0.4 - 0.2;
                const color = getRandomColor(); // 随机颜色
                
                particles.push(new ParticleLimit(x, y, directionX, directionY, size, color));
            }
        };
        
        // 动画循环
        const animateParticles = (): void => {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
            // 更新并绘制所有粒子
            particles.forEach((particle) => particle.update(canvas, ctx));
            // 递归调用动画
            animationFrameId = requestAnimationFrame(animateParticles);
        };
        
        // 调整画布大小
        const resizeCanvas = (): void => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            particles.length = 0; // 清空粒子数组
            initParticles(); // 重新初始化粒子
        };
        
        // 初始化画布和粒子
        resizeCanvas();
        animateParticles();
        
        // 监听窗口大小变化
        window.addEventListener("resize", resizeCanvas);
        
        // 清理
        return () => {
            window.removeEventListener("resize", resizeCanvas);
            cancelAnimationFrame(animationFrameId);
        };
    }, []);
    
    return (
        <div className="relative flex items-center justify-center h-screen overflow-hidden">
            {/* Canvas 背景 */}
            <canvas ref={canvasRef} className="absolute top-0 left-0 w-full h-full"/>
            
            {/* 404 文字 */}
            <div className="relative z-10 text-center">
                <h1 className="text-9xl font-code text-englishLight dark:text-englishDark">404</h1>
                <p className="text-7xl text-gray-300 mt-4 font-code text-englishLight dark:text-englishDark">
                    Page Not Found
                </p>
                <button onClick={() => {
                    navigate('/');
                }} className="text-5xl text-gray-300 mt-4 font-code text-englishLight dark:text-englishDark">
                    Click me
                </button>
            </div>
        
        </div>
    );
}

export default NotFound